<template>
<div>
  <div>{{data}}</div>
<div class="name">
      角色名称:
      <input type="text" v-model="data.rolename" />
    </div>
    <div class="quan">
      <p>角色管理:</p>
      <el-tree
        :data="menuList"
        show-checkbox
        node-key="id"
        :props="{children:'children',label:'title'}"
        ref="tree"
      ></el-tree>
    </div>
    <div class="status">
      <el-switch v-model="data.status" inactive-text="状态"></el-switch>
    </div>
    <div class="main">
      <el-button type="primary" @click="changefa">修改</el-button>
    </div>
</div>
</template>
<script>
import { mapGetters, mapActions } from"vuex";
import { reqmenulist, reqroleadd, reqroleedit, reqroleinfo  } from "../../../request/api";
import { successAlert } from "../../../utils/alert";
export default { 
components: {},
 computed: {
 ...mapGetters({}),
},
 methods: {
 ...mapActions({}),
 changefa(){
   this.$emit("fa")
 },
 add(){
   
 }
},
 mounted() {
   reqmenulist({istree:true}).then(res=>{
     if(res.data.code===200){
       this.menuList = res.data.list;
     }
   })
 },
props: [],
data() {
return {
      
      data: {
        rolename:"",
        menus:"",
        status:""
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      menuList:[],
};
},
};
</script>
<style lang="less" scoped>
.name,
.quan {
  font-size: 20px;
  margin: 30px;
  line-height: 30px;
}
.name input {
  border: 2px solid #ccc;
  width: 500px;
  height: 30px;
  color: #666;
}
.status,.main{
  margin: 30px;
}
</style>